<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="css/style.css">
    <style>
        body{
            background-color: #ccc;
        }
        input, button, select, textarea {
            outline: none;
            -webkit-appearance: none;
            border-radius: 0;
        }
        .main{
            margin: 100px auto;
            position: relative;
        }
        .ordinary{
            vertical-align:top;
            display: block;
        }
        .ordinary input[type='radio']{
            position: absolute;
            left: 0;
            top: -20px;
            z-index: 1;
            opacity: 0;
        }
        .ordinary:before{
            position: relative;
            top: -2px;
            z-index: 2;
            content: '\20';
            display: inline-block;
            height: 20px;
            width: 20px;
            background: url(img/unchecked.png) no-repeat 0 0;
            -webkit-background-size:cover;
            background-size:cover;
            vertical-align: middle;
            margin-right: 5px;
        }
        .ordinary_focus:before{
            background: url(img/checked.png) 0 0 no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
        }
    </style>
</head>
<body>
    <div class="main">
        <label for="1" class="ordinary"><input type="radio" name="option" id="1">转发</label>
        <label for="2" class="ordinary"><input type="radio" name="option" id="2">原创</label>
        <label for="3" class="ordinary"><input type="radio" name="option" id="3">群分享</label>
        <label for="4" class="ordinary"><input type="radio" name="option" id="4">微博分享</label>
    </div>

    <div class="checkbox">
        <label for="zf" class="ordinary"><input type="radio" name="pic_option" id="zf">转发</label>
        <label for="yc" class="ordinary"><input type="radio" name="pic_option" id="yc">原创</label>
        <label for="qfx" class="ordinary"><input type="radio" name="pic_option" id="qfx">群分享</label>
        <label for="wbfx" class="ordinary ordinary_focus"><input type="radio" name="pic_option" id="wbfx">微博分享</label>
    </div>
</body>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
//    $(window).load(function () {   });
       $('input[name="option"]').on('click',function () {
           $(this).parents('.main').find('.ordinary').removeClass('ordinary_focus');
           $(this).parent().addClass('ordinary_focus');
       });

    $('input[name="pic_option"]').on('click',function(){
        $(this).parents('.checkbox').find('.ordinary').removeClass('ordinary_focus');
        $(this).parent().addClass('ordinary_focus')
    });

</script>
</html>